<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <div class="container mx-auto max-w-5xl p-6">
      <!-- 基本信息 -->
      <div class="profile-section bg-white rounded-lg shadow-md mb-8 overflow-hidden">
        <div class="section-body">
          <div class="mx-auto max-w-7xl px-5">
            <!-- 顶部导航标签 -->
            <div class="favorites-tabs flex border-b border-gray-200 mb-6 overflow-x-auto">
              <button v-for="(tab, index) in tabs" :key="index" :class="[
                'tab-btn py-3 px-6 text-sm font-medium whitespace-nowrap relative transition-colors',
                currentTab === tab.key ? 'text-blue-500' : 'text-gray-500 hover:text-gray-700'
              ]" @click="getUserFavoritesFun(tab.key)">
                {{ tab.label }}
                <span v-if="currentTab === tab.key" class="absolute bottom-0 left-0 w-full h-0.5 bg-blue-500"></span>
              </button>
            </div>

            <!-- 收藏内容列表 -->
            <div v-if="favorites.length > 0"
              class="favorites-list grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
              <div v-for="(item, index) in favorites" :key="index"
                class="favorite-item bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300 hover:shadow-lg hover:-translate-y-1">
                <div class="favorite-image h-40 bg-cover bg-center relative"
                  :style="{ backgroundImage: `url(${item.targetCover})` }">
                  <div
                    class="favorite-badge absolute top-3 left-3 bg-black bg-opacity-60 text-white text-xs px-2 py-1 rounded-full flex items-center gap-1">
                    <i :class="item.icon" class="text-xs"></i>
                    <span>{{ item.type }}</span>
                  </div>
                </div>

                <div class="favorite-content p-4 flex flex-col h-full">
                  <h3 class="favorite-title text-lg font-semibold text-gray-900 mb-2 line-clamp-2 cursor-pointer"
                    @click="goDetails(item.targetId)">
                    <span class="hover:text-blue-500 transition-colors">{{ item.targetName }}</span>
                  </h3>
                  <div class="favorite-content-text text-gray-600 mb-2 line-clamp-3">
                    {{ item.targetDesc }}
                  </div>
                  <div class="favorite-actions flex justify-between items-center mt-auto pt-3 border-t border-gray-100">
                    <button
                      class="favorite-action-btn flex items-center gap-1 text-gray-500 hover:text-blue-500 transition-colors">
                      <i class="fas fa-share-alt text-sm"></i>
                      <span class="text-sm flex items-center gap-1">
                        <el-icon>
                          <Clock />
                        </el-icon>
                        <DateConvert :date="item.createTime" />
                      </span>
                    </button>
                    <button
                      class="favorite-action-btn remove flex items-center gap-1 text-gray-500 hover:text-red-500 transition-colors"
                      @click="removeFavorite(item)">
                      <i class="fas fa-trash-alt text-sm"></i>
                      <span class="text-sm">取消收藏</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <!-- 空状态 -->
            <div v-else class="empty-state text-center">
              <div class="empty-icon text-5xl text-gray-300 mb-4">
                <i class="fas fa-bookmark"></i>
              </div>
              <div class="empty-text text-xl font-medium text-gray-700 mb-2">暂无收藏内容</div>
              <div class="empty-subtext text-gray-500 mb-6">您可以收藏感兴趣的文章、报告、活动等内容，以便日后查阅</div>
              <!-- <button class="empty-btn bg-blue-500 text-white px-4 py-2 rounded-md flex items-center gap-2 mx-auto hover:bg-blue-600 transition-colors">
          <i class="fas fa-compass"></i>
          <span>去探索</span>
        </button> -->
            </div>

            <!-- 分页 -->
            <div v-if="favorites.length > 0" class="pagination flex justify-center py-8">
              <el-pagination v-model:current-page="currentPage" :page-size="pageSize" :total="total" :pager-count="7"
                layout="prev, pager, next" background />
            </div>
          </div>

        </div>
      </div>
    </div>



  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Star, ChatLineRound, Share, Delete, Clock } from '@element-plus/icons-vue';
import { getUserFavorites, performUserAction } from '@/api/userAction';
import DateConvert from '~/components/dateConvert.vue';

import { useRouter } from "vue-router";
const router = useRouter()

// 标签页数据
const tabs = [
  { key: '', label: '全部' },
  { key: 'news', label: '资讯' },
  { key: 'act', label: '活动' },
];

// 当前选中的标签
const currentTab = ref('');

// 分页相关
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

onMounted(() => {
  getUserFavoritesFun('');
});

// 获取用户收藏列表
const getUserFavoritesFun = (val) => {
  currentTab.value = val;
  getUserFavorites({ pageNum: currentPage.value, pageSize: pageSize.value, businessType: currentTab.value }).then(res => {
    console.log('获取用户收藏成功', res);
    favorites.value = res.data.list;
    res.data.list.forEach(item => {
      item.tags = item.tags?.split(',');
    });
    total.value = res.data.total;
  });
};

// 收藏数据
const favorites = ref([]);

// 取消收藏
const removeFavorite = (item) => {
  // 确认是否删除
  ElMessageBox.confirm('确定要删除该收藏吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    performUserAction({
      targetId: item.targetId,
      businessType: item.businessType,
      actionType: item.actionType
    }).then(res => {
      getUserFavoritesFun(currentTab.value);
    })
  })
};

const goDetails = (id) => {
  const targetRoute = router.resolve({ path: '/information/informationDetails', query: { id } });
  window.open(targetRoute.href, '_blank');
}

</script>

<style scoped>
.favorites-tabs {
  -webkit-overflow-scrolling: touch;
}

.tab-btn {
  position: relative;
}

.tab-btn.active::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 2px;
  background-color: var(--el-color-primary);
}

.favorite-item {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.favorite-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.favorite-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.el-pagination {
  --el-pagination-button-bg-color: transparent;
}
</style>
